<template>
	<view
		:style="'order:'+item.order+';'+item.css"
		class="box-swiper-group">
		<scroll-view scroll-x>
			<template v-if="list.length">
				<view
					class="_for"
					v-for="group in list"
					@click="$_to('group/detail?gid=' + group.gid)">
					<view class="_for-img">
						<image :src="group.cover?group.cover:item.defaultBackgroundImage" mode="widthFix"></image>
					</view>
					<view class="_for-mask"></view>
					<view class="_for-content">
						<view class="_for-content-name">
							<text>{{group.name}}</text>
						</view>
						<view class="_for-content-info">
							<text>{{group.postCount}}帖子</text>
						</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="_for skeleton-screen"></view>
				<view class="_for skeleton-screen"></view>
				<view class="_for skeleton-screen"></view>
			</template>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name:"box-swiper-group",
		props:{
			item:{
				type:Object,
				default:null
			}
		},
		data() {
			return {
				list:[],
				listStatus:"loading"
			};
		},
		mounted(){
			this.getList();
		},
		methods:{
			getList(){
				this.$_request(
					"GET","/api/fresns/v1/group/list",
					{
						...this.item.query,
						"filterType":"whitelist",
						"filterKeys":"gid,cover,name,postCount"
					},
					(res) => {
						this.list = res.data.data.list;
					}
				)
			}
		}
	}
</script>

<style lang="scss" scoped>
.box-swiper-group{
	padding: 25rpx;
	background: #FFF;
	margin-bottom: 25rpx;
	scroll-view{
		white-space: nowrap;
		height: 216.666rpx;
		._for{
			display: inline-flex;
			width: 216.666rpx;
			height: 216.666rpx;
			margin-right: 25rpx;
			position: relative;
			overflow: hidden;
			border-radius: 10rpx;
			._for-img{
				width: 216.666rpx;
				height: 216.666rpx;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 1;
			}
			._for-mask{
				width: 216.666rpx;
				height: 216.666rpx;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
				background-color:rgba(0,0,0,0.3);
			}
			._for-content{
				width: 216.666rpx;
				height: 216.666rpx;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 3;
				display: flex;
				justify-content: flex-end;
				flex-flow: column;
				._for-content-name{
					line-height: 28rpx;
					padding: 0 15rpx;
					text{
						font-size: 28rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
						color: #FFF;
					}
				}
				._for-content-info{
					line-height: 22rpx;
					padding: 10rpx 15rpx 15rpx 15rpx;
					text{
						font-size: 22rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
						color: #FFF;
					}
				}
			}
		}
	}
}
</style>